import React, { Component } from 'react'
import { withRouter } from "react-router-dom"
import { Card, Button, List } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import "./index.css"

class Detail extends Component {
  render() {
    // 获取商品数据
    const { commodity } = this.props.location.state
    const title = (
      <>
        <Button type="link" size="small" onClick={() => { this.props.history.go(-1) }}>
          <ArrowLeftOutlined />
        </Button>
        <span>商品详情</span>
      </>
    )
    return (
      <div className="detail">
        <Card title={title}>
          <List itemLayout="horizontal" bordered={true}>
            <List.Item>
              <h2 className="title">商品名称：</h2>
              <span>{ commodity.name }</span>
            </List.Item>
            <List.Item>
              <h2 className="title">商品描述：</h2>
              <span>{ commodity.desc }</span>
            </List.Item>
            <List.Item>
              <h2 className="title">商品价格：</h2>
              <span>{ commodity.price }元</span>
            </List.Item>
            <List.Item>
              <h2 className="title">所属分类：</h2>
              <span>{ commodity.CategoryId ? commodity.CategoryId.name : '' }</span>
            </List.Item>
            <List.Item>
              <h2 className="title">商品图片：</h2>
              <span>
                {
                  commodity.imgs.map((item, index) => {
                    return <img src={item.url} key={index} alt="图片" />
                  })
                }
              </span>
            </List.Item>
            <List.Item>
              <h2 className="title">商品详情：</h2>
              <span dangerouslySetInnerHTML={{ __html: commodity.detail }}></span>
            </List.Item>
          </List>
        </Card>
      </div>
    )
  }
}

export default withRouter(Detail)
